<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>搜索</title>
    <!--CSS文件-->
    <link href="../evan/css/style.css" type="text/css" rel="stylesheet" />
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../css/style.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../js/phone.js" ></script>
    <script type="text/javascript" src="../js/TouchSlide.1.1.js"></script>
    <script type="text/javascript" src="../js/movie.js"></script>
</head>
<body>

<div class="bbox" id="bbox">
    <div id="serch" class="searchx">
        <input id="secontent" type="search" class="serch-input"  placeholder="请输入您要搜索的内容"
               v-model="scontent" v-on:fouce="fouces()" v-on:click="clsear()"
               @keydown.down="changeDown()" @keydown.up.prevent="changeUp()"
        >
        <input type="submit" value="搜索" v-on:click="sub()">
        <ul id="boxUl" v-if="isShow" class="prompt" v-cloak>
            <li  v-for="(value,index) in myData.slice(0,4)" >
                <span v-html="brightenKeyword(value.movename,value.movename)" ></span>
            </li>
            <li v-text="info.address" v-for="(info,index) in myDataT.slice(0,4)">
            </li>
        </ul>
    </div>

<div class="movie" id="movies">
    <ul v-if="isBox" v-cloak>
        <li v-for="minfo in myDataC">
            <a href="details.html">
                <span class="tag">9.1</span>
                <div class="posters">
                    <img v-bind:src="minfo.img" />
                </div>
                <div class="post-content">
                    <div class="left-con">
                        <p class="tit">
                            <small>{{minfo.movename}}</small>
                            <span>
                                	<i>3D</i>
                                    <i>IMAX</i>
                                </span>
                        </p>
                        <p class="eng">主演：{{minfo.director}}</p>
                        <p class="act">均价：{{minfo.movieprice}}</p>
                        <p class="tim">导演<span>{{minfo.mainactor}}</span></p>
                    </div>
                    <div class="right-btn">
                        <div class="ticket-btn">购票</div>
                    </div>
                </div>
            </a>
        </li>
    </ul>
    <ul v-if="isBox== false" v-cloak>
        <li v-for="minfo in showData">
            <a href="details.html">
                <span class="tag">9.1</span>
                <div class="posters">
                    <img v-bind:src="minfo.img" />
                </div>
                <div class="post-content">
                    <div class="left-con">
                        <p class="tit">
                            <small>{{minfo.movename}}</small>
                            <span>
                                	<i>3D</i>
                                    <i>IMAX</i>
                                </span>
                        </p>
                        <p class="eng">主演：{{minfo.director}}</p>
                        <p class="act">均价：{{minfo.movieprice}}</p>
                        <p class="tim">导演<span>{{minfo.mainactor}}</span></p>
                    </div>
                    <div class="right-btn">
                        <div class="ticket-btn">购票</div>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>
</div>

<!--VUE.Js文件-->
<script src="../evan/vue/vue-2.4.0.js"></script>
<script src="../evan/vue/vue-resource-1.3.4.js"></script>
<!--逻辑实现-->
<script>
    /*监听input搜索框*/
    window.onload=function () {
        new Vue({
            el:'#bbox',
            data:{
                myData: [],
                myDataT:[],
                myDataC:[],
                showData:[],
                scontent:'',
                now:-1,
                isShow:false,
                isBox:false
            },
            mounted:function(){
                this.showMovies();
            },
            methods:{
                showMovies:function(){
                    this.$http.get('http://127.0.0.1:8080//sear/showmovies',{
                    }).then(function (res) {
                        this.showData = res.body;
                        console.log(this.showData);
                    })
                },
               sub:function(){
                   var names = this.scontent;
                   //alert(names);
                    if (names!=''){
                        this.$http.get('http://127.0.0.1:8080/sear/moveis?key='+names,{
                        }).then(function (res) {
                            this.myDataC = res.body.cinemaMovies;
                            this.isBox = true;
                        })
                    }else{
                        alert("没有聂荣");
                        this.isBox = false;
                    }
               },
                brightenKeyword(val, keyword) {
                    val = val + '';
                    if (val.indexOf(keyword) !== -1 && keyword !== '') {
                        return val.replace(keyword, '<span style="color: red">' + keyword + '</span>')
                    } else {
                        return val
                    }
                },
              fouces:function(){
                  if (this.scontent!=''){
                      //this.isShow=true;
                      this.$http.get('http://127.0.0.1:8080/sear/moveis?key='+this.scontent,{
                      }).then(function (res) {
                         this.myData = res.body.cinemaMovies;
                         this.myDataT = res.body.cinemaInfo;

                         this.isShow=true;
                      })
                  }else{
                      this.isShow=false;
                  }
              },
              clsear:function () {
                  //var names = $('#secontent').val();
                 if (names=''){
                    // this.isShow = true;
                 }else{
                     //this.isShow=true;
                 }
              },
                changeDown:function(){
                    this.now++;
                    if(this.now==this.myData.length)this.now=-1;
                    this.t1=this.myData[this.now];
                },
                changeUp:function(){
                    this.now--;
                    if(this.now==-2)this.now=this.myData.length-1;
                    this.t1=this.myData[this.now];
                },
            },
            watch:{
                scontent:function () {
                    this.fouces();
                },
            }
        })
    }
</script>
</body>
</html>